<template>
  <div id="home">
    <Swiper :list='hlimg' loop auto dots-position="center" color="#123456"></Swiper>
    <div class="model-item">
      <div class="product-tit">珠海长隆海洋王国</div>
      <div class="model-item-img">
        <img src="static/img/df7aecb0e18d910b5a68a58063.jpg" alt="">
      </div>
    </div>
    <div class="product-detial">
      <div class="product-tit">长隆乐园，让你欢乐无限<span class="get-more"><router-link to="">更多>></router-link></span></div>
      <div class="product-detial-list">
        <router-link to="" class="item-product-a">
          <div>
            <img src="https://3img.evente.cn/47/10/50/19be2501f09d54a1bb09dad0bd.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>广州长隆野生动物世界</p>
            <p>缆车全线免费</p>
          </div>
        </router-link>
        <router-link to="" class="item-product-a">
          <div>
            <img src="https://0img.evente.cn/8a/e1/e0/059120e5566ecb8a889b73dab8.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>广州长隆野生动物世界</p>
            <p>缆车全线免费</p>
          </div>
        </router-link>
        <router-link to="" class="item-product-a">
          <div>
            <img src="https://0img.evente.cn/01/0b/90/dedd509f8b8efa4ff53b1d6c57.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>广州长隆野生动物世界</p>
            <p>缆车全线免费</p>
          </div>
        </router-link>
        <router-link to="" class="item-product-a">
          <div>
            <img src="https://2img.evente.cn/e0/35/3d/cb197d08e7c26694be74c6b0a7.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>广州长隆野生动物世界</p>
            <p>缆车全线免费</p>
          </div>
        </router-link>
      </div>
    </div>
    <div class="product-detial">
      <div class="product-tit">全球马戏汇聚长隆<span class="get-more"><router-link to="">更多>></router-link></span></div>
      <div class="product-detial-list">
        <router-link to="" class="list-product-a">
          <div>
            <img src="https://3img.evente.cn/c3/0f/4b/32b897b3eb5381c5d032f01586.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>广州长隆国际大马戏</p>
            <p>马戏盛宴</p>
          </div>
        </router-link>
      </div>
      <div class="product-detial-list">
        <router-link to="" class="list-product-a">
          <div>
            <img src="https://3img.evente.cn/c5/9f/bc/f0b8256bde78b275b034a3bcbb.jpg" alt="" style="width:100%">
          </div>
          <div>
            <p>珠海长隆横琴国际马戏城</p>
            <p>集世界马戏精华</p>
          </div>
        </router-link>
      </div>
    </div>
    <Footbar></Footbar>
    <transition name="aniMask">
      <div v-show="isShowMenu" class="edit-mask" @click="changeMenu">
      </div>
    </transition>
  </div>

</template>

<script>
  import { Swiper } from 'vux'
  import { mapState } from 'vuex'
  export default {
    data: function () {
      return {

        hlimg: [
          {
            img: "static/img/239058e0999c5795626466e9b1.jpg"
          },
          {
            img: "static/img/8f040bd76ad8e6ec90f020bc20.jpg"
          },
          {
            img: "static/img/37e6453030e4a3c1f22e6bd02d.jpg"
          },
          {
            img: "static/img/66fd3ca40297ece023a35b283b.jpg"
          },
        ]
      }
    },
    components: {
      Swiper,
    },
    computed: {
      ...mapState([
        "isShowMenu"
      ])
    },
    methods: {
      changeMenu: function () {
        var data = this.isShowMenu ? false : true;
        this.$store.commit("setIsShowMenu", data);
      }
    }
  }

</script>

<style scoped>
  #home {
    background-color: #eee;
    /*height: calc(100vh - 0.44rem);*/
    margin-top: 0.44rem;
    z-index: 700;
    
  }
  Swiper{
  }
  .model-item {
    margin: 0.1rem 0;
    background-color: white;
  }

  .get-more {
    float: right;
    right: 0.1rem;
  }

  .model-item-img {
    /*width: 100%;*/
    border: 0.006rem solid #dedede;
    padding: 0.1rem;
    border-left: none;
    border-right: none;
  }

  .model-item-img img {
    width: 100%;
  }

  .product-tit {
    height: 0.44rem;
    line-height: 0.44rem;
    padding: 0 0.1rem;
    font-size: 0.18rem;
  }

  .product-detial {
    background-color: white;
    margin-top: 0.1rem;
    padding-bottom: 0.1rem;
  }

  .product-detial-list::after {
    content: "";
    display: block;
    clear: both;
  }

  .item-product-a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    float: left;
    height: 1.9rem;
    width: 48.5%;
    margin: 0 1.5% 0.05px 0;
    border: 0.01px solid #eeeeee;
    box-sizing: border-box;
  }

  .list-product-a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    float: left;
    /*height: 1.8rem;*/
    padding-bottom: 0.06rem;
    width: 95%;
    margin: 0 1.5% 0.05px 0;
    border: 0.01px solid #eeeeee;
    box-sizing: border-box;
  }

  .edit-mask {
    position: fixed;
    left: 0;
    top: 0.54rem;
    width: 100vw;
    height: calc(100vh - 0.44rem);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 900;
  }


  .aniMask-enter,
  .aniMask-leave-to {
    opacity: 0;
  }

  .aniMask-enter-active,
  .aniMask-leave-active {
    transition: all 0.7s;
  }

  .aniMask-enter-to,
  aniMask-leave {
    opacity: 1;
  }
</style>